<script setup lang="ts">
import {computed, reactive, watch,ref} from "vue";

const props = defineProps<{
  UseList: any[]
}>()
const showPicker = ref(false);
let userList= [];
const showdetailUser = ref({})
const connect = (user:any) => {
  showPicker.value = true
  showdetailUser.value = user
}

watch(()=>props.UseList, (newValue, oldValue) => {

  userList = newValue
  console.log(userList)
  userList.forEach((item:any)=>{
    console.log(item.tags)
    if(item.tags == null || item.tags.length == 0){
      item.tags = []
      return
    }
    item.tags = JSON.parse(item.tags)
  })
})
// const userList = computed(() => props.UseList || []); //监听组件的传参，传了就显示，没传就隐藏，
// 这么写最重要的还是为了如果父组件没有传递 UseList，或者传递了 undefined，那么在子组件中直接访问 props.UseList.length 就会抛出错误。
</script>

<template>
  <van-card
      v-for="user in userList"
      :desc="user.profile"
      :title="`${user.userAccount} (${user.gender == 1 ? '男' : '女'}`+')'"
      :thumb="user.avatarUrl"
  >
    <template #tags>
      <van-tag plain type="danger" v-for="tag in user.tags" style="margin: 8px 8px 0 0">{{tag}}</van-tag>
    </template>
    <template #footer>
      <van-button size="mini" @click="connect(user)">联系我</van-button>
    </template>
  </van-card>
  <van-empty image="search" v-if="userList.length==0" description="搜索结果为空" />


  <van-dialog v-model:show="showPicker" title="详细信息">
    <van-cell title="账号" :value="showdetailUser.userAccount"></van-cell>
    <van-cell title="电话" :value="showdetailUser.phone"></van-cell>
    <van-cell title="邮箱" :value="showdetailUser.email"></van-cell>
    <van-cell title="性别" :value="showdetailUser.gender ? '男' : '女'"></van-cell>
    <van-cell title="自我介绍" :value="showdetailUser.profile"></van-cell>
  </van-dialog>
</template>

<style scoped>

</style>